<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书借阅记录</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <img src="./assets/index.png" alt="借阅封面" class="cover-image">
  <h4>同学，您目前的借阅情况为：</h4>
  <table id="borrowed-books" class="borrowed-books-table">
    <thead>
      <tr>
        <th>书名</th>
        <th>借阅时间</th>
      </tr>
    </thead>
    <tbody id="borrowed-info">
    </tbody>
  </table>
  <button onclick="window.location.href='index.html'">返回首页</button>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[$$]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
    
      const studentId = getParameterByName('studentId'); // 获取学号
      const apiUrl = `https://xshx.gufe.edu.cn/webchat/book/list/${studentId}`;
    
    axios({
      url: apiUrl
    }).then(result => {
      console.log(result);
      const data = result.data;
      const tbody = document.getElementById('borrowed-info');
      
      data.forEach(book => {
        const row = document.createElement('tr');
        
        const bookNameCell = document.createElement('td');
        bookNameCell.textContent = book.bookName;
        row.appendChild(bookNameCell);
        
        const borrowTimeCell = document.createElement('td');
        borrowTimeCell.textContent = book.bookTime;
        row.appendChild(borrowTimeCell);
        
        tbody.appendChild(row);
      });
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>